<template>
  <div :class="wrpCls">
    <!-- 用户工具栏插槽 -->
    <div class="x-user-bar">
      <MessageIcon />
      <slot name="toolbar" />
    </div>
    <!-- 登录用户信息及下拉菜单 -->
    <template>
      <slot name="dropdown" />
      <a-dropdown v-if="!$slots.user && fullName"
                  placement="bottomRight"
                  class="ant-pro-global-header-index-action">
        <!-- 头像 -->
        <span class="ant-pro-account-avatar">
          <Avatar v-if="avatar"
                  size="small"
                  :src="avatar"
                  class="antd-pro-global-header-index-avatar" />
          <Avatar v-else
                  size="small"
                  icon="user"
                  class="antd-pro-global-header-index-avatar" />
          <span style="display:inline-block; vertical-align:middle; padding-left: 10px">{{ fullName }}</span>
        </span>
        <template #overlay>
          <a-menu :visible="true">
            <!-- 工作单位 -->
            <a-sub-menu>
              <span slot="title">
                <a-icon type="deployment-unit" />
                工作单位&nbsp;
              </span>
              <a-menu-item v-for="(item, index) in unitList"
                           :key="index">
                <div @click="handleUnitClick(index, item)"
                     :class="item.selected ? 'x-user-menu-unit-active' : ''">
                  {{ item.name }}
                  <a-icon v-if="item.selected"
                          type="check" />
                </div>
              </a-menu-item>
            </a-sub-menu>

            <a-menu-item v-if="Object.keys($store.getThemes()||{}).length>0"
                         @click="$refs.themeSettingForm.show()">
              <a-icon type="profile" />
              个性化设置
            </a-menu-item>

            <a-menu-item @click="onPasswordClick">
              <a-icon type="lock" />
              修改密码
            </a-menu-item>

            <a-menu-divider />
            <a-menu-item key="logout"
                         @click="handleLogout">
              <a-icon type="logout" />
              退出登录
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </template>

    <!-- 修改密码表单 -->
    <!-- <a-modal :centered="true"
             :maskClosable="false"
             title="修改密码"
             :visible="password.visible"
             :confirm-loading="password.loading"
             @ok="handleChangePassword"
             @cancel="password.visible=false">
      <a-form-model :model="password.form"
                    ref="form"
                    :label-col="{ span: 5 }"
                    :wrapper-col="{ span: 18 }"
                    :rules="{
                      oldPass: [{required: true, message: '此项为必填项'}],
                      newPass: [{validator: validatePass, trigger: 'blur'},{required: true, message: '此项为必填项'}],
                      mpassword: [{validator: validatePass, trigger: 'blur'},{required: true, message: '此项为必填项'}]
                    }">
        <a-form-model-item label="原密码"
                           prop="oldPass">
          <a-input v-model="password.form.oldPass"
                   type="password" />
        </a-form-model-item>
        <a-form-model-item label="新密码"
                           prop="newPass">
          <a-input v-model="password.form.newPass"
                   type="password" />
        </a-form-model-item>
        <a-form-model-item label="确认密码"
                           prop="mpassword">
          <a-input v-model="password.form.mpassword"
                   type="password" />
        </a-form-model-item>
      </a-form-model>
    </a-modal> -->

    <!-- 个性化主题设置 -->
    <!-- <ThemesSetting ref="themeSettingForm"
                   :themes="themes"
                   @change="handleThemesChange" /> -->
  </div>
</template>

<script>

import { Avatar } from 'ant-design-vue'
import { password as passwordRegExp } from '@zh/common-utils/regexp'
import { changeLoginUnit, logout } from '../api/auth/index'
import MessageIcon from '../components/MessageIcon'
import { changePassword } from '../api/user/index'
// import ThemesSetting from './ThemesSetting.vue'

export default {
  components: { Avatar, MessageIcon },
  props: {
    fullName: {
      type: String,
      default: null
    },
    avatar: {
      type: String,
      default: null
    },
    unitList: {
      type: Array,
      default: () => []
    },
    themes: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      password: {
        form: {},
        loading: false,
        visible: false
      }
    }
  },
  computed: {
    wrpCls () {
      return {
        'ant-pro-global-header-index-right': true
        // [`ant-pro-global-header-index-${this.isMobile || !this.topMenu ? 'light' : this.theme}`]: true
        // [`ant-pro-global-header-index-${ ? 'light' : this.theme}`]: true
      }
    }
  },
  methods: {
    onPasswordClick () {
      this.password.visible = true
      this.password.form = {}
      this.password.loading = false
    },
    /**
     * 切换登录单位
     */
    handleUnitClick (index, item) {
      if (this.unitList[index].selected) {
        return
      }
      this.unitList.map((x, i) => {
        x.selected = false
      })
      const unit = this.unitList[index]
      changeLoginUnit(unit.unitUserId).then((response) => {
        location.replace('/')
      })
    },
    handleChangePassword () {
      this.$refs.form.validate((ok) => {
        if (!ok) {
          return
        }
        this.loading = true
        changePassword(this.form).then((response) => {
          this.visible = false
          this.$router.redirectLogin(this.$route.fullpath)
        }).finally(() => {
          this.loading = false
        })
      })
    },
    handleLogout () {
      const me = this
      this.confirm({
        title: '提示',
        content: '确认退出登录?',
        okText: '确认',
        cancelText: '取消',
        onOk () {
          logout().finally(() => {
            me.$router.redirectLogin('/')
          })
        },
        onCancel () { }
      })
    },
    validatePass () {

    },
    handleThemesChange ({ key, value }, themes) {
      this.$emit('themesChange', { key, value }, themes)
    }
  }
}
</script>

<style lang="less" scoped>
.ant-pro-drop-down {
  ::v-deep(.action) {
    margin-right: 8px;
  }
  ::v-deep .ant-dropdown-menu-item {
    min-width: 160px;
  }
}
.skin-menu-item {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0px 4px;
  border-radius: 2px;
  vertical-align: middle;
  margin-top: -4px;
}
.x-user-menu-unit-active {
  color: #bf772d;
}
.x-user-bar {
  display: inline-block;
  height: 100%;
  box-sizing: border-box;
  vertical-align: top;
  > * {
    margin: 0px 10px;
    padding: 0px;
  }
  > *:hover {
    background-color: transparent;
  }
  > i {
    height: 100%;
    font-size: var(--font-size-20);
    line-height: 65px;
    cursor: pointer;
  }
}
</style>